<template>
    <div >
        <div class="pl10">
            <span class="font17">政策宣讲</span>
        </div>
         <div class="font15 mt10 pl10">
            <span class="graytext ">发起人:</span>
            <span >{{createName}}</span>
        </div>
         <div class="font10 mt10 bggray ptandpb10">
            <div>
                <span class="graytext pl10">发起人：</span>
                <span >{{createName}}</span>
            </div>
            <div class="mt10">
                <span class="graytext pl10">发起人组织：</span>
                <span >{{createOrgName}}</span>
             </div>
        </div>
        <div class="mt10 font13 graytext">
            <van-field
            required
                right-icon="arrow"
                input-align="right"
                label-width="8em"
                clickable
                name="picker"
                :value="choseTypeName"
                label="政策宣讲限制:"
                placeholder="请选择"
                @click="showPicker = true"
                style=" padding: 6px 6px 0px 10px ;font-size: 15px;"
            
                />
                <van-popup v-model="showPicker" position="bottom">
                <van-picker
                    show-toolbar
                    :columns="columns"
                    @confirm="onConfirm"
                    @cancel="showPicker = false"
                />
                </van-popup>
            
        </div>
        
        <div class="mt10" style="background-color: white;display: flex;">
            <van-cell class=" graytext " style=" padding: 6px 10px;font-size: 15px;" title="政策宣讲时间：" :value="date" @click="show = true" />
           
            <van-calendar v-model="show" type="range" @confirm="onConfirmTime"/>
             <van-icon class="van-cell__right-icon" name="arrow" />
            
        </div>
        <div class="mt10" style=" display: flex;">
            <div class="blue_item"></div>
            <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">政策宣讲清单</span>
            <van-icon style="line-height: 33px;color: royalblue;" color="royalblue" size="13px" name="plus" />
             <span class="font13" style="display: flex; line-height: 33px;margin-left:5px;color: royalblue;margin-right:10px">新增</span>
        </div>   
        <template>
    <el-table
      :data="tableData"
      stripe
      border
      fit
      :cell-class-name="cell"
      size="mini"
      style="width: 100%; "
      >
      <el-table-column
        prop="number"
        label="序号"
        >
      </el-table-column>
      <el-table-column
        prop="titile"
        label="宣讲事项"
        width="180"
        >
      </el-table-column>
      <el-table-column
        prop="type"
        label="类型"
        width="100"
        >
      </el-table-column>
      <el-table-column label="操作" width="180">
      <template slot-scope="scope" >
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row.titile)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row.titile)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
  </template>
    </div>
</template>
<script>
export default {
    data(){
        return{
            createName: "AAA",
            createOrgName:"BBB",
            showPopover:false,
            value1:0,
            date: '',
            show: false,
            choseTypeName: '',
            columns: ['选项1', '选项二', '选项三'],
            showPicker: false,
             tableData: [{
            number: '1',
            titile: 'AAAAAAAAAAAAAAA',
            type: '1111111111'
          }, {
            number: '2',
            titile: 'BBBBBBBBBBB',
            type: '222222222'
          }, {
            number: '3',
            titile: 'CCCCCCCCCCCC',
            type: '3333333333'
          }, {
            number: '4',
            titile: 'DDDDDDDDDDD',
            type: '44444444'
          }]
        
        }
    },
    methods:{
        onSelect(actions){
            console.log("onSelect"+actions.text);
        },
        formatDate(date) {
             return `${date.getMonth() + 1}/${date.getDate()}`;
        },
        onConfirmTime(date) {
        const [start, end] = date;
        this.show = false;
        this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
        },
         onConfirm(value) {
            this.choseTypeName = value;
            this.showPicker = false;
        },
         handleEdit(index, row) {
            console.log(index,'AAAAA'+ row);
             this.$router.push(
                  {
                    name:'zcxjfromdetail',
                    query:{
                      active:this.active,
                    }
                  }
                )
        },
        handleDelete(index, row) {
            console.log(index,'BBBBB'+ row);
        },
         cell({row, column, rowIndex, columnIndex}) {
            // return 'line-height: 12px'
            return 'cell'
        }
  },
    

}
</script>
<style >
 .graytext{
    color: #646566;
 }
 .mt10{
     margin-top:10px
 }
 .mt5{
     margin-top:5px
 }
 .bggray{
     background-color: whitesmoke;
 }
 .pl10{
     padding-left: 10px;
 }
 .ptandpb10{
     padding-top: 10px;
     padding-bottom: 10px;
 }
 .chosebox{
     width: 100px;
     display: inline;
 }
.van-field__label {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    flex: none;
    box-sizing: border-box;
    width: 6.2em;
    margin-right: 80px;
    color: #646566;
    text-align: left;
    word-wrap: break-word;
    
}
.van-cell__right-icon {
    height: 36px;
    font-size: 16px;
    line-height: 36px;
    margin-right: 6px;
}

.el-table .cell {
  
    line-height: 12px;
  
}
</style>